<template>
		<view class="route-item flex--col" @click="onRouteDetail" role="button">
			<view class="route-item-info flex--col">
				<text class="text--main-dark"> {{ route.name }} </text>
				<text class="text--secondary-dark"> {{ `${route.distance}KM ${route.time}h` }}</text>
			</view>
			<view class="route-item-func">
				<view class="func-button" @click.stop="handleMakeTravel" role="button">出行</view>
			</view>
		</view>
</template>

<script>
	import { REFRESH_ROUTES,REFRESH_TRAVEL_REQUEST } from "@/core/constant/event.js"
	import * as AssistApi from "@/api/assist/blind.js"
	export default{
		props:['route'],
		methods:{
			onRouteDetail(){
				this.$navTo("pages/routeDetails/routeDetails",{routeId:this.route.id})
			},
			async handleMakeTravel(){
				try{
					const params = {routeId:this.route.id}
					await AssistApi.makeTravel(params)
						uni.$emit(REFRESH_TRAVEL_REQUEST)
					this.$navTo("pages/xzhu/xzhu")
				
				}catch(err){
					console.log(err)
					this.$error(err.errMsg || "操作失败")
				}			
			},
		},
	}
</script>

<style lang="scss" scoped>
	
	.text--main-dark{
		font-size: 24px;
		font-weight: 700;
		color:#333;
	}
	
	.text--secondary-dark{
		font-size: 16px;
		font-weight: 600;
		color:#333;
	}
	
	.text--thirdary-dark{
		font-size: 14px;
		font-weight: 400;
		color:#333;
	}
	
	.route-item{
		@include border-three-roundings;
		box-sizing: border-box;
		width:100%;
		padding:20px 10px;
		background-color: #fff;
		
		gap:24px;
	}
	
	.route-item-info{
	   justify-content: center;
	   align-items: center;
	   gap:12px;
	}
	
	.route-item-func{
		margin:auto;
	}
	
	.func-button{
		padding:4px 28px;
		border-radius: 40upx;
		border: 2upx solid #000;
		text-align: center;
		box-shadow: -8px -8px #ff8d1a;
		margin-left:10px;
		font-size: 16px;
		font-weight: 700;
		color: #333;
	}
	
</style>